/*
 * @Author: hcluo
 * @Date: 2020-08-29 09:44:39
 * @LastEditors: hcluo
 * @LastEditTime: 2020-09-07 16:27:40
 * @Description:
 */
import React, { useState } from 'react';
// import PropTypes from 'prop-types';
import { Header, Left, Right, VirtualScrolling, UseVirtualScrolling as useVirtualList } from './';
import { Modal } from '@wind/wind-ui';

// var allData = [{}];
// fetch('./api/sectorConstituent.json')
//   .then(response => {
//     if (!response.ok) {
//       return Promise.reject(response.status);
//     }
//     return response.json();
//   })
//   .then(res => {
//     allData = res;
//   })
//   .catch(err => {
//     console.error('%c 🎂 err: ', 'font-size:20px;background-color: #93C0A4;color:#fff;', err);
//   });

const x = 1000;
const y = 100;

var allData = (() => {
  let yItem = [];
  for (let yIndex = 0; yIndex < y; yIndex++) {
    let xItem = [];
    for (let xIndex = 0; xIndex < x; xIndex++) {
      xItem.push(`${xIndex}-${yIndex}`);
    }
    yItem.push(xItem);
  }
  return yItem;
})();
console.log('%c 🍅 allData: ', 'font-size:20px;background-color: #FFDD4D;color:#fff;', allData);

let options = {
  viewX: 5, // 可视区域x方向数据条数
  viewY: 4, // 可视区域y方向数据条数
  itemWidth: 100, // 单个元素的高
  itemHeight: 100, // 单个元素的宽
  header: allData[0].map(item => `--${item}--`), // 表头
  fixed: 2,
  //   fixedY?: 0, // 可视区域y方向固定数
  // fixedX?:0,
  // transposition: true, //是否转置
};
export default function App() {
  // const [data, setData] = useState([]);
  // window.RightGetData = id => {
  //   let cur = allData.filter(item => item.id === id);
  //   if (cur[0]) setData(cur[0].list);
  //   else setData([]);
  // };

  const [option, setOption] = useState(options);
  const { data, containerProps, wrapperProps } = useVirtualList(allData, option);

  return (
    <div className="common-modal">
      <button
        onClick={() => {
          setOption({
            viewX: !option.transposition ? 4 : 5, // 可视区域x方向数据条数
            viewY: !option.transposition ? 5 : 4, // 可视区域y方向数据条数
            itemWidth: 100, // 单个元素的高
            itemHeight: 100, // 单个元素的宽
            header: allData[0].map(item => `--${item}--`), // 表头
            //   fixedY?: 0, // 可视区域y方向固定数
            fixed: 2,
            transposition: !option.transposition, //是否转置
          });
        }}
      >
        转置
      </button>
      {/* <div style={{ width: '500px', height: '400px', margin: '100px' }}>
        <VirtualScrolling
          columnNum={5}
          rowNum={10}
          data={allData}
          noDataTips="请选择板块"
          // renderColumn={}
          render={(data, header, column) => {
            let res = data.map((row, i) => {
              return (
                <div key={i} style={{ width: '100%' }}>
                  {row.map((item, i) => {
                    return (
                      <span key={i} style={{ margin: '5px' }}>
                        {item}
                      </span>
                    );
                  })}
                </div>
              );
            });
            let headerDom = header.map((item, index) => (
              <span key={index} style={{ margin: '5px' }}>
                {item}
              </span>
            ));
            return [headerDom, res];
          }}
        />
      </div> */}

      <div {...containerProps} style={{ height: '515px', width: '515px', overflow: 'auto' }}>
        {option.transposition ? <TableT {...data} /> : <Table {...data} />}

        <div {...wrapperProps}></div>
      </div>
    </div>
  );
}
const TableT = ({ viewData, header }) => {
  return (
    <div
      style={{
        height: '500px',
        width: '500px',
        display: 'flex',
        flexWrap: 'wrap',
        position: 'absolute',

        flexDirection: 'column',
      }}
    >
      {header.map((item, i) => (
        <div key={i} style={{ width: '100px', height: '100px' }}>
          {item.data}
        </div>
      ))}
      {viewData.map((ele, i) =>
        ele.map((item, i2) => (
          <div key={`${i}${i2}`} style={{ width: '100px', height: '100px' }}>
            {item.data}
          </div>
        )),
      )}
    </div>
  );
};
const Table = ({ viewData, header }) => {
  return (
    <div
      style={{
        height: '300px',
        width: '500px',
        display: 'flex',
        flexWrap: 'wrap',
        position: 'absolute',
      }}
    >
      {header.map((item, i) => (
        <div key={i} style={{ width: '100px', height: '100px' }}>
          {item.data}
        </div>
      ))}
      {viewData.map((ele, i) =>
        ele.map((item, i2) => (
          <div key={`${i}${i2}`} style={{ width: '100px', height: '100px' }}>
            {item.data}
          </div>
        )),
      )}
    </div>
  );
};

App.propTypes = {};
App.defaultProps = {};
